<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .zhuti1 {
            background: black;
            color: white;
        }

        .zhuti2 {
            background: pink;
            color: green;
        }
    </style>
</head>

<body>
    通过在页面上点击button，实现主题切换
主题1：黑底白字
主题2：粉底绿字
    <button>点击按钮变色</button>
    <ul class="zhuti1">
        <li>li+1</li>
        <li>li+2</li>
        <li>li+3</li>
        <li>li+4</li>
        <li>li+5</li>
    </ul>
    <script>

        //通过在页面上点击button，实现主题切换 
        //	主题1：黑底白字
        //	主题2：粉底绿字
        var ul = document.querySelector('ul');//通过querySelector得到页面上的ul
        var button = document.querySelector('button')//通过querySelector得到页面上的button
        button.onclick = function () {//button的点击事件
                if (ul.getAttribute('class') === 'zhuti1') {//判断是否为主题1如果是的话，用setAttribute属性改变class为zhuti2
                    ul.setAttribute('class', 'zhuti2');
                }
                else {//否则的话，用setAttribute属性改变class为zhuti1
                    ul.setAttribute('class', 'zhuti1');
                }        
        }
    </script>
</body>

</html>
